<template>
    <div>
        <!-- 轮播图:ref是用来获取元素的 -->
        <ul ref="myRef" class="swiper">
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        <button @click="show('up')">上</button>&nbsp;<button @click="show('down')">下</button>
    </div>
</template>

<script>
export default {
    name:"Index",
    data(){
        return {
            ref:'',
            index:0,//用来切换的下标
            lens:"",//子元素的总长度
        }
    },
    methods:{
        show(type){
            const list = this.$refs.myRef.children;
            //index如果小于0等于lens长度,如果大于lens长度就等于0
            if(type==='up'){
                this.index--;
            }else{
                this.index++;
            }
            if(this.index<0){
                this.index=this.lens-1
            }else if(this.index>this.lens-1){
                this.index=0
            }
            //遍历所有li,给所有的li去掉active类名,给index下标的li加上active类名
            for(let i=0;i<this.lens;i++){
                if(i===this.index){
                    this.$refs.myRef.children[i].classList.add('active')
                }else{
                    this.$refs.myRef.children[i].classList.remove('active')
                }
            }
        }
    },
    mounted(){
        //获取到了我们的ref对象
        //this.$refs.myRef就是原生的js对象
        this.lens=this.$refs.myRef.childElementCount
    }
}
</script>

<style lang="scss" scoped>
    .swiper{
        li{
            display: none;
        }
        .active{
            display: block;
        }
    }
</style>